<template>
	<view class="content adrAddPage">
		<view class="flex-colume-start">
			<view class="order-box1">
				<view class="flex-row-start order-item1">
					<view class="tip1">姓名</view>
					<view class="line1"></view>
					<input maxlength="12" v-model="addForm.consignee" placeholder="请填写您的姓名"></input>
				</view>
				<view class="flex-row-start order-item1">
					<view class="tip1">电话</view>
					<view class="line1"></view>
					<input maxlength="11" v-model="addForm.telephone" type="tel" placeholder="请填写您的联系方式"></input>

				</view>
				<view class="flex-row-start order-item1" style="justify-content: space-between;">
					<view class="flex-row-start" style="flex: 1;">
						<view class="tip1">所在地区</view>
						<view class="line1"></view>
						<input v-model="addForm.adrText" placeholder="点击选择您的地址"></input>
					</view>
					<view class="locBtn" @click="locBtnClick()"></view>
					<image class="order-arrow-right" src="/static/arrow/ordering-arrow-right.png"></image>
				</view>
				<view class="flex-row-start order-item1">
					<view class="tip1">详细地址</view>
					<view class="line1"></view>
					<input v-model="addForm.address" placeholder="某酒店/某房间/(某小区/某号)"></input>
				</view>
			</view>




			<view style="margin-top: 73rpx;" class="addAdrBtn" @click="addBtnClick()">{{id?'修改服务地址':'新增服务地址'}}</view>

		</view>
		<!-- <u-picker :show="showAdr" mode="region"></u-picker> -->
		<cc-selectDity :province="province" :city="city" :area="area" :show="showAdr"
			@changeClick="changeClick" @sureSelectArea="onsetCity" @hideShow="onhideShow"></cc-selectDity>

	</view>
</template>

<script>
	import {
		adrEdit,
		adrAdd
	} from '@/api/api'
	import request from '@/api/request'
	export default {
		data() {
			return {
				id: '',
				title: '添加地址',
				showAdr: false,
				province:'北京',
				city:'北京市',
				area:'东城区',
				addForm: {
					consignee: '', //姓名
					telephone: '', //电话
					address: '', //输入的地址
					city: '',
					province: '',
					quan: '',
					adrText: ''

				}

			}
		},
		onLoad(e) {
			if (e && e.id) {
				this.id = e.id
				this.title = '修改地址'
				var model = uni.getStorageSync('adrDetail')
				
				
				this.addForm = {
					consignee: model.consignee, //姓名
					telephone: model.telephone, //电话
					address: model.address, //输入的地址
					city: model.city_name,
					province: model.province_name,
					quan: model.quan,
					adrText: model.province_name + ' ' + model.city_name + ' ' + model.quan
				}
				

			}
		},
		methods: {
			addBtnClick() {
				if (!this.addForm.consignee) {
					request.toast('请填写您的姓名')
					return
				}
				if (!this.addForm.telephone || this.addForm.telephone.length != 11) {
					request.toast('请填写正确的联系方式')
					return
				}
				if (!this.addForm.adrText) {
					request.toast('请选择所在区')
					return
				}
				if (!this.addForm.address) {
					request.toast('请填写详细地址')
					return
				}
				uni.showLoading({
					mask: true
				})
				var params = {
					...this.addForm
				}
				if (this.id) {
					params.id = this.id
				}
				adrAdd(params).then(res => {
					uni.hideLoading({
						success: res1 => {
							uni.showToast({
								icon:'none',
								title:res.message
							})
						}
					})
					if (res.code == 200) {
						uni.$emit('adrUpt')
						setTimeout(res2 => {
							uni.navigateBack()
						}, 1000)
					}
				}).catch(err => {
					uni.hideLoading()
				})
			},
			locBtnClick() {
				this.showAdr = true
			},
			//选择器更改省市区事件
			changeClick(value, value2, value3){
				this.province = value;
				this.city = value2;
				this.area = value3;
				
			},
			onhideShow() {
				this.showAdr = false
			
			},
			//选中省
			onsetCity(e) {
				console.log('选择',e)
				var data = e.detail.target.dataset;
				var address = data.province + ' ' +  data.city  + ' ' + data.area;
				this.showAdr = false
				this.addForm.province = data.province
				this.addForm.city = data.city
				this.addForm.quan = data.area
				this.addForm.adrText = address
			},

		}
	}
</script>

<style lang="scss">
	.adrAddPage {
		.order-box1 {
			margin-top: 26rpx;
			width: 710rpx;
			background: white;
			box-shadow: 0px 2rpx 14rpx 0px rgba(200, 200, 228, 0.3);
			border-radius: 20rpx;
			box-sizing: border-box;
			padding: 20rpx 20rpx;

			.order-item1 {
				position: relative;
				width: 100%;
				height: 60rpx;
				margin-top: 12rpx;
				margin-bottom: 12rpx;
				background-color: rgba(125, 93, 223, 0.02);
				border-radius: 8rpx;
				padding: 0rpx 14rpx;

				.locBtn {
					position: absolute;
					left: 120rpx;
					height: 60rpx;
					top: 0rpx;
					width: 540rpx;
				}

				.tip1 {
					font-size: 26rpx;
				}

				.line1 {
					width: 0.5px;
					height: 25rpx;
					background-color: rgb(230, 230, 230);
					margin-left: 12rpx;
					margin-right: 12rpx;
				}

				input {
					flex: 1;
					margin-right: 20rpx;
					font-size: 24rpx;
				}

				.order-arrow-right {
					width: 11rpx;
					height: 22rpx;
				}
			}
		}

		.addAdrBtn {
			width: 700rpx;
			height: 80rpx;
			color: white;
			text-align: center;
			line-height: 80rpx;
			font-size: 32rpx;
			font-weight: 600;
			background: #C90000;
			border-radius: 51rpx;
		}
	}
</style>